/**
 * 设置页面组件（占位符）
 * 该组件用于展示用户的个人信息和账户安全设置选项
 */

// 导入 React 库，用于构建 React 组件
import React from 'react'
// 从 antd 库中导入所需的 UI 组件，包括 Card（卡片）、Button（按钮）、Avatar（头像）和 Divider（分割线）
import { Card, Button, Avatar, Divider } from 'antd'
// 从自定义的 auth store 中导入 useAuthStore hook，用于获取用户认证状态和用户信息
import { useAuthStore } from '@stores/auth'
// 从 react-router-dom 库中导入 useNavigate hook，用于实现页面导航
import { useNavigate } from 'react-router-dom'

/**
 * SettingsPage 组件
 * 展示用户的个人信息和账户安全设置选项
 */
function SettingsPage() {
  // 使用 useAuthStore hook 获取用户认证状态和用户信息
  const { isAuthenticated, user } = useAuthStore()
  // 使用 useNavigate hook 获取导航函数，用于在页面间导航
  const navigate = useNavigate()

  return (
    <div style={{ 
      // 设置顶部外边距为 64px
      marginTop: 64,
      // 如果用户已认证，设置左侧外边距为 200px，否则为 0
      marginLeft: isAuthenticated ? 200 : 0,
      // 设置最小高度为视口高度减去 64px
      minHeight: 'calc(100vh - 64px)',
      // 使用 Flexbox 布局
      display: 'flex',
      // 子元素在交叉轴上顶部对齐
      alignItems: 'flex-start',
      // 子元素在主轴上居中对齐
      justifyContent: 'center',
      // 设置内边距为 24px
      padding: 24
    }}>
      {/* 第一个卡片组件，用于展示用户的个人信息 */}
      <Card title="个人信息" style={{ width: 400, marginRight: 32, textAlign: 'center' }}>
        {/* 头像组件，展示用户的头像 */}
        <Avatar
          // 设置头像大小为 80px
          size={80}
          // 如果用户有头像链接，则显示该链接的图片，否则不显示图片
          src={user?.avatar_url}
          style={{ margin: '16px auto', display: 'block', background: '#e6f7ff', color: '#1890ff', fontSize: 32 }}
        >
          {/* 如果用户有用户名，则显示用户名的首字母大写，否则不显示 */}
          {user?.username?.[0]?.toUpperCase()}
        </Avatar>
        {/* 分割线组件，用于分隔头像和下面的用户信息 */}
        <Divider style={{ margin: '16px 0' }} />
        <div style={{ textAlign: 'left', marginLeft: 40 }}>
          {/* 显示用户的用户名 */}
          <p style={{ fontSize: 16, marginBottom: 12 }}><b>用户名：</b>{user?.username}</p>
          {/* 显示用户的邮箱，如果用户没有邮箱，则显示 '-' */}
          <p style={{ fontSize: 16, marginBottom: 0 }}><b>邮箱：</b>{user?.email || '-'}</p>
        </div>
      </Card>
      {/* 第二个卡片组件，用于展示账户安全设置选项 */}
      <Card title="账户安全" style={{ width: 400 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 180 }}>
          {/* 按钮组件，点击后导航到修改密码页面 */}
          <Button type="primary" size="large" style={{ borderRadius: 20, width: 180 }} onClick={() => navigate('/settings/password')}>修改密码</Button>
        </div>
      </Card>
    </div>
  )
}

// 导出 SettingsPage 组件，以便在其他文件中使用
export default SettingsPage 